<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>骡窝窝酒店</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <link href="styles/bootstrap.min.css" rel="stylesheet"/>
    <link href="styles/NewGlobal.css" rel="stylesheet"/>

    <script type="text/javascript" src="Scripts/zepto.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>

</head>
<body>
<div class="header">
    <a href="index.html" class="home">
        <span class="header-icon header-icon-home"></span>
        <span class="header-name">主页</span>
    </a>
    <div class="title" id="titleString"></div>
    <a href="javascript:history.go(-1);" class="back">
        <span class="header-icon header-icon-return"></span>
        <span class="header-name">返回</span>
    </a>
</div>


<script type="text/javascript" src="calendar/touch.js"></script><!--新版zepto合并版中不包括touch.js-->
<script type="text/javascript" src="calendar/highlight.js"></script>
<script type="text/javascript" src="calendar/gmu.js"></script>
<script type="text/javascript" src="calendar/event.js"></script>
<script type="text/javascript" src="calendar/parseTpl.js"></script>
<script type="text/javascript" src="calendar/widget.js"></script>
<script type="text/javascript" src="calendar/calendar.js"></script>
<script type="text/javascript" src="dialog/dialog.js"></script>
<link rel="stylesheet" type="text/css" href="calendar/calendar.css"/>
<link rel="stylesheet" type="text/css" href="calendar/calendar.default.css"/>
<link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
<link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
<script src="/js/plugins/dialog/dialog.min.js"></script>
<script src="/js/plugins/dialog/dialog.min.js"></script>
<script type="text/javascript" src="/js/plugins/jrender/jrender.js"></script>
<script type="text/javascript" src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="/js/plugins/jquery-bootstrap/jquery.bootstrap.min.js"></script>
<script src="/js/plugins/jquery-form/jquery.form.js"></script>
<style>
    .section {
        background: #f3f3f3;
        font-size: 14px;
    }

    #datepicker_wrap {
        overflow: hidden;
        height: 0;
        -webkit-transition: height 200ms ease-in-out;
        background: #e1e1e1;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #datepicker_wrap > div {
        display: none;
        padding: 5px 5px 25px 5px;
    }

    .filter {
        padding: 10px 10px 0px;

    }

    .filter:after {
        content: '\0020';
        clear: both;
        display: block;
        height: 0;
        font-size: 0;
        line-height: 0;
    }

    .filter a {
        border: 1px solid #e1e1e1;
        text-decoration: none;
        color: #000;
        padding: 5px 26px 5px 5px;
        margin: 0 5px 0 0;
        position: relative;
        background: #fff;
    }

    .icon-down {
        background-image: url("http://gmu.baidu.com/demo/assets/icons-36-black.png");
        background-position: -216px 50%;
        width: 18px;
        height: 18px;
        display: inline-block;
        -webkit-background-size: 776px 18px;
        background-size: 776px 18px;
        float: right;
        margin-top: 10px;
    }

    .icon-down-up {
        background-position: -180px 50%;
    }

    .filter a .ui-icon-down {
        position: absolute;
        top: 50%;
        right: 5px;
        background-image: url("http://gmu.baidu.com/demo/assets/icons-36-black.png");
        -webkit-background-size: 776px 18px;
        background-size: 776px 18px;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        background-position: -216px 50%;
    }

    .filter a.ui-state-active, .filter a.ui-state-hover {
        background: #fff;
    }

    .filter a.ui-state-active .ui-icon-down, .filter a.ui-state-hover .ui-icon-down {
        background-position: -180px 50%;
    }

    .filter a.search {
        float: right;
        padding: 5px;
        margin: 0;
    }

    .result {
        padding: 10px 15px;
        text-align: left;
    }
</style>
<div class="container">
    <ul class="unstyled hotel-bar nav nav-pills nav-justified">
        <li class="first">
            <a href="#BookRoom" class="active">房型</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#pills-3">简介</a>
        </li>

        <li><a href="#">地图</a></li>
        <li><a id="review" href="/hotel/review.html">评论</a></li>
    </ul>

    <!--酒店预订-->
    <div class="tab-content" id="pills-tabContent">
        <div id="BookRoom" class="tab-pane active fade in">

            <div alt="" class="detail-address-bar">
                <img src="Images/location_icon.png">
                <p render-html="name"></p>
                <p render-html="address"></p>
            </div>
            <div id="datetab" class="detail-time-bar">
                <img alt="" src="Images/calendar.png">
                <p render-html="tel"></p>
                <span class="icon-down"></span>
            </div>


            <ul class="unstyled roomlist">


                <li render-loop="list">
                    <div class="roomtitle">
                        <div class="roomname" render-html="list.name"></div>

                        <div class="fr">

                            <span style="color: red">价格:</span>

                            <em class="orange roomprice" render-html="list.price">
                            </em>

                            <img title="房间" render-src="list.coverUrl"></a>
                            <a href='login.aspx@page=_2Forderhotel.aspx&hotelid=5&roomtype=4&checkInDate=2014-4-11&checkOutDate=2014-4-12'
                               title='立即预定' class='btn btn-success iframe'>预定</a>


                        </div>

                    </div>


                </li>


            </ul>
            <div style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);" class="hotel-prompt">
                <span class="hotel-prompt-title" id="digxx">特别提示</span>
                <p>最早入住时间为中午12：00，如需提前入住请联系客服。</p>
            </div>
        </div>


        <!--酒店简介-->
        <div class="tab-pane fade active in" id="pills-3">
            <div id="hotelinfo" class="hotel-prompt ">
                <span class="hotel-prompt-title">酒店简介</span>
                <p render-html="intro"></p>
                <p render-html="address"></p>
                <p render-html="tel"></p>
            </div>
        </div>
    </div>


</div>


</div>


<div class="footer">
    <div class="gezifooter">

        <a href="login.aspx" class="ui-link">立即登陆</a> <font color="#878787">|</font>
        <a href="reg.aspx" class="ui-link">免费注册</a> <font color="#878787">|</font>


        <a href="/index.html" class="ui-link">骡窝窝</a>
    </div>
    <div class="gezifooter">
        <p style="color:#bbb;">骡窝窝酒店连锁 &copy; 版权所有 2015-2020</p>
    </div>
</div>

<!--酒店预订-->
<div id="inputModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">酒店预订</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="" method="post"
                      enctype="multipart/form-data" id="editForm">


                    <div class="form-group">
                        <label class="col-lg-4 control-label">入住时间：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="schedule"
                                   onclick="WdatePicker({readOnly:true,minDate:new Date()});"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-4 control-label">离店时间：</label>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="schedule"
                                   onclick="WdatePicker({readOnly:true,minDate:new Date()});"/>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary submitBtn">提交订单</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        var user = getUser();
        if (user){
        } else {
            window.location.href = "/login.html";
        }
        $(".submitBtn").click(function () {
            $.get("/hotels/orders/"+user.id, function (data) {
                console.log(data);
                if (data.success) {
                    window.location.href = "/hotel/index.html";
                }

            })
        });
    })
</script>
</html>
